Skip to main content
Last updated on
Version: 1.0.0

More Actions

Overview​

The more actions option is commonly used in dropdowns, popovers, or context menus.

The more action supports four types:

  • Icon standing front

  • Checked

  • Unchecked

  • Divider

The standing icon font is displayed by default, and its state changes when the user interacts.

Icon Standing Front​

This item displays an icon positioned before the action label.

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Checked​

The checked state shows that the item is currently selected.

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Unchecked​

The unchecked state indicates that the item is available but unselected.

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Divider​

The divider state is used to group related actions.

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

User Experience​

✨ Use icons only when they add clear meaning or improve recognition.

✨ Keep action labels concise and action-oriented (e.g. Edit, Delete, Duplicate).

✨ Use Checked and Unchecked states to clearly communicate selection or priority.

✨ Group related actions together and separate them using dividers when needed.

✨ Ensure sufficient spacing between items to prevent misclicks.

✨ Divider elements should be subtle and never interactive.

✨ Avoid overcrowding—limit the number of actions to reduce cognitive load.

Figma​

All details and specifications in the design can be referenced through the Figma link below.

More Action UI Design

Last updated on